<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册 - 火星云盘系统</title>
    
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    
    <!-- Bootstrap Icons -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
    
    <style>
        body {
            background: linear-gradient(135deg, #1e88e5 0%, #1565c0 100%);
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', sans-serif;
            padding: 40px 0;
        }

        .register-container {
            background: white;
            border-radius: 16px;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
            overflow: hidden;
            width: 500px;
            max-width: 95%;
            padding: 50px 40px;
        }

        .register-header {
            text-align: center;
            margin-bottom: 40px;
        }

        .logo-icon {
            width: 70px;
            height: 70px;
            background: linear-gradient(135deg, #2979ff 0%, #1e6fff 100%);
            border-radius: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 20px;
            font-size: 35px;
            color: white;
        }

        .register-title {
            font-size: 28px;
            font-weight: 700;
            color: #333;
            margin-bottom: 8px;
        }

        .register-subtitle {
            color: #666;
            font-size: 14px;
        }

        .form-group {
            margin-bottom: 20px;
        }

        .form-label {
            font-weight: 500;
            color: #333;
            margin-bottom: 8px;
            font-size: 14px;
        }

        .form-control {
            height: 46px;
            border-radius: 8px;
            border: 1px solid #e0e0e0;
            padding: 0 16px;
            font-size: 14px;
        }

        .form-control:focus {
            border-color: #2979ff;
            box-shadow: 0 0 0 3px rgba(41, 121, 255, 0.1);
        }

        .input-group-text {
            background: white;
            border: 1px solid #e0e0e0;
            border-right: none;
            border-radius: 8px 0 0 8px;
        }

        .input-group .form-control {
            border-left: none;
            border-radius: 0 8px 8px 0;
        }

        .btn-register {
            width: 100%;
            height: 48px;
            background: linear-gradient(135deg, #2979ff 0%, #1e6fff 100%);
            border: none;
            border-radius: 8px;
            color: white;
            font-size: 16px;
            font-weight: 600;
            margin-top: 20px;
            transition: all 0.3s;
        }

        .btn-register:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(41, 121, 255, 0.3);
        }

        .login-link {
            text-align: center;
            margin-top: 20px;
            color: #666;
            font-size: 14px;
        }

        .login-link a {
            color: #2979ff;
            text-decoration: none;
            font-weight: 600;
        }

        .login-link a:hover {
            text-decoration: underline;
        }

        .benefits {
            background: #f8f9fa;
            border-radius: 8px;
            padding: 15px;
            margin-top: 20px;
        }

        .benefits-title {
            font-size: 13px;
            font-weight: 600;
            color: #333;
            margin-bottom: 10px;
        }

        .benefit-item {
            display: flex;
            align-items: center;
            font-size: 13px;
            color: #666;
            margin-bottom: 8px;
        }

        .benefit-item i {
            color: #2979ff;
            margin-right: 8px;
        }
    </style>
</head>
<body>

<div class="register-container">
    <div class="register-header">
        <div class="logo-icon">
            <i class="bi bi-rocket-takeoff-fill"></i>
        </div>
        <h2 class="register-title">创建账户</h2>
        <p class="register-subtitle">开始您的云存储之旅</p>
    </div>
    
    <form id="registerForm">
        <div class="form-group">
            <label class="form-label">用户名</label>
            <div class="input-group">
                <span class="input-group-text">
                    <i class="bi bi-person"></i>
                </span>
                <input type="text" class="form-control" id="username" placeholder="请输入用户名（3-20个字符）" required>
            </div>
        </div>
        
        <div class="form-group">
            <label class="form-label">昵称</label>
            <div class="input-group">
                <span class="input-group-text">
                    <i class="bi bi-person-badge"></i>
                </span>
                <input type="text" class="form-control" id="nickname" placeholder="请输入昵称" required>
            </div>
        </div>
        
        <div class="form-group">
            <label class="form-label">邮箱</label>
            <div class="input-group">
                <span class="input-group-text">
                    <i class="bi bi-envelope"></i>
                </span>
                <input type="email" class="form-control" id="email" placeholder="请输入邮箱地址" required>
            </div>
        </div>
        
        <div class="form-group">
            <label class="form-label">密码</label>
            <div class="input-group">
                <span class="input-group-text">
                    <i class="bi bi-lock"></i>
                </span>
                <input type="password" class="form-control" id="password" placeholder="请输入密码（至少6位）" required>
            </div>
        </div>
        
        <div class="form-group">
            <label class="form-label">确认密码</label>
            <div class="input-group">
                <span class="input-group-text">
                    <i class="bi bi-lock-fill"></i>
                </span>
                <input type="password" class="form-control" id="confirmPassword" placeholder="请再次输入密码" required>
            </div>
        </div>
        
        <button type="submit" class="btn btn-register">立即注册</button>
    </form>
    
    <div class="benefits">
        <div class="benefits-title">注册即享：</div>
        <div class="benefit-item">
            <i class="bi bi-check-circle-fill"></i>
            <span>10GB 免费存储空间</span>
        </div>
        <div class="benefit-item">
            <i class="bi bi-check-circle-fill"></i>
            <span>无限上传下载次数</span>
        </div>
        <div class="benefit-item">
            <i class="bi bi-check-circle-fill"></i>
            <span>多设备同步访问</span>
        </div>
    </div>
    
    <div class="login-link">
        已有账户？<a href="/login">立即登录</a>
    </div>
</div>

<!-- Bootstrap 5 JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

<script>
    document.getElementById('registerForm').addEventListener('submit', async function(e) {
        e.preventDefault();
        
        const username = document.getElementById('username').value.trim();
        const nickname = document.getElementById('nickname').value.trim();
        const email = document.getElementById('email').value.trim();
        const password = document.getElementById('password').value;
        const confirmPassword = document.getElementById('confirmPassword').value;
        
        // 表单验证
        if (username.length < 3 || username.length > 20) {
            showAlert('用户名长度应在3-20个字符之间', 'warning');
            return;
        }
        
        if (password.length < 6) {
            showAlert('密码长度至少为6位', 'warning');
            return;
        }
        
        if (password !== confirmPassword) {
            showAlert('两次输入的密码不一致', 'warning');
            return;
        }
        
        try {
            const response = await fetch('/user/register', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({
                    username,
                    nickname,
                    email,
                    password,
                    confirmPassword
                })
            });
            
            const result = await response.json();
            
            if (result.success) {
                showAlert('注册成功，正在跳转到登录页...', 'success');
                setTimeout(() => {
                    window.location.href = '/login';
                }, 1500);
            } else {
                showAlert(result.message, 'danger');
            }
        } catch (error) {
            showAlert('注册失败，请稍后重试', 'danger');
        }
    });
    
    function showAlert(message, type) {
        const alertDiv = document.createElement('div');
        alertDiv.className = `alert alert-${type} alert-dismissible fade show position-fixed`;
        alertDiv.style.cssText = 'top: 20px; right: 20px; z-index: 9999; min-width: 300px;';
        alertDiv.innerHTML = `
            ${message}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        `;
        document.body.appendChild(alertDiv);
        
        setTimeout(() => {
            alertDiv.remove();
        }, 3000);
    }
</script>

</body>
</html>

